<template>
  <div class="cloudSpeaker">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row class="title">
      <el-button type="text" size="small" :class="active === true ? 'active' :''" @click="active = true">云喇叭绑定状态查询</el-button>
      <el-button type="text" size="small" :class="active === false ? 'active' :''" @click="active = false">支付消息历史查询</el-button>
    </el-row>
    <cloud-status v-if="active"></cloud-status>
    <cloud-history v-else></cloud-history>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import CloudStatus from './cloudSpeaker/cloudStatus'
import CloudHistory from './cloudSpeaker/cloudHistory'

export default {
  name: 'cloudSpeaker',
  components: {
    Breadcrumb,
    CloudStatus,
    CloudHistory
  },
  data() {
    return {
      active: true
    }
  }
}
</script>

<style lang="scss" scoped>
  .cloudSpeaker {
    .title {
      .el-button {
        color: #333;
        background: #ddd;
        border-radius: unset;
        padding: 5px 10px;
      }
      .active {
        color: #fff;
        background: rgb(255,174,0);
      }
    }
  }
</style>
